<template>
	<div class="order_main">
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formOrderSearch" class="orderFormMain " label-width='100px'>
		        <el-form-item label="任务类型">
							<el-select v-model="formOrderSearch.workTypeId" placeholder="全部">
								<el-option
									v-for="item in workTypeSelect"
									:key="item.id"
									:label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
		        </el-form-item>
		        <el-form-item label="紧急程度">
							<el-select v-model="formOrderSearch.emergencyDegreeId" placeholder="全部">
								<el-option
									v-for="item in emergencyDegreeSelect"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
							</el-select>
		        </el-form-item>
		        <el-form-item label="创建人">
		          <el-input v-model="formOrderSearch.createUserName" placeholder="创建人"></el-input>
		        </el-form-item>
		        <el-form-item label="处理人">
		          <el-input v-model="formOrderSearch.handelUserName" placeholder="处理人"></el-input>
		        </el-form-item>
		        <el-form-item label="联系人">
		          <el-input v-model="formOrderSearch.customerName" placeholder="联系人"></el-input>
		        </el-form-item>
		       
		        <el-form-item label="创建时间">
		        	<el-date-picker
				        v-model="formOrderSearch.createStartTime"
								type="datetime"
								placeholder="开始时间">
							</el-date-picker>
		       
		        	<el-date-picker
								v-model="formOrderSearch.createEndTime"
								type="datetime"
								placeholder="结束时间">
							</el-date-picker>
		        </el-form-item>

		        <el-form-item label="完成时间">
		        	<el-date-picker
				        v-model="formOrderSearch.completeStartTime"
								type="datetime"
								placeholder="开始时间">
							</el-date-picker>
		       
		        	<el-date-picker
								v-model="formOrderSearch.completeEndTime"
								type="datetime"
								placeholder="结束时间">
							</el-date-picker>
		        </el-form-item>

		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="orderallTable"
	        stripe
	        border
	        style="width: 100%" 
					v-loading="loading">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="emergencyDegreeName"
	          label="紧急程度">
	        </el-table-column>
	        <el-table-column
	          prop="workOrderStateName"
	          label="状态">
	        </el-table-column>
	        <el-table-column
	          prop="workerOrderId"
	          label="工单ID">
	        </el-table-column>
	        <el-table-column
	          prop="workTypeName"
	          label="任务类型">
	        </el-table-column>
	        <el-table-column
	          prop="createUserName"
	          label="创建人">
	        </el-table-column>
	        <el-table-column
	          prop="createDate"
	          label="创建时间"
	          min-width='120'>
	        </el-table-column>
	        <el-table-column
	          prop="handleUserName"
	          label="处理人">
	        </el-table-column>
	        <el-table-column
	          prop="handleDate"
	          label="处理时间"
	          min-width='120'>
	        </el-table-column>
	        
	        <el-table-column
	          fixed='right'
	          width="160"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
	              <el-button
	                size="mini"
	                @click="handleLook(scope.$index, scope.row)">查看</el-button>
	             <!-- <el-button
							    v-if="(scope.row.workOrderState == 3 || scope.row.workOrderState == 4) ? false : true"
	                size="mini"
	                type="danger"
	                @click="handleClose(scope.$index, scope.row)">关闭</el-button> -->
	            </template>
	        </el-table-column>
	      </el-table>
	      <div class="block">
	        <el-pagination
	          @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageRask"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeRask"
		        layout="sizes, prev, pager, next"
		        :total="totalRask">
	        </el-pagination>
	      </div>
	  </div>
		<!-- gm分配gm -->
	    <el-dialog title="分配" :visible.sync="dialogAllot" center width='450px' :close-on-click-modal="false" :show-close="false">
	      <div class="dialogall_ctext">
	        <div class="line_list clearfix line_listeditbox" >
						<span class="line_listtit fl"><i class="clred">*</i>处理人：</span>
						<div class="overh" >

							<el-select v-model="handelUserId" placeholder="请选择">
								<el-option
									v-for="item in handelUserArr"
									:key="item.id"
									:label="item.operationName"
									:value="item.id">
								</el-option>
							</el-select>
							<p class="line_edittips">*该工单只会指派给 #厂家名称# 厂家人员</p>
						</div>
					</div>
	      </div>
	      <div slot="footer" class="dialog-footer">
	        <el-button @click="dialogAllot = false">取 消</el-button>
	        <el-button type="primary" @click="trueBtn">确 定</el-button>
	      </div>
	    </el-dialog>
			<!-- gm分配gm -->
	</div>
</template>
<script>
	import { 
		getWorkOrderList,
		getTaskTypes,
		getBusinessPersonnelList,
		workOrderStatus } from '@/api'
  export default {
    data() {
      return {
				formOrderSearch: {//查询条件
					workTypeId:'',       //工单类型id
					emergencyDegreeId:'',//紧急程度id
          createUserName:'',   //创建人姓名
					handelUserName:'',   //处理人姓名
					customerName:'',     //联系人员姓名
					// WorkOrderState:'',   //处理状态
					// workOrderStateName:'',//处理名称
					createStartTime:'',  //创建时间 开始
					createEndTime:'',    //创建时间 结束
					completeStartTime:'',//完成时间 开始
					completeEndTime:'',  //完成时间 结束
				},
				equipmentIds: '', // 设备id
				emergencyDegreeSelect:[],//紧急程度select
				emergencyDegreeSelectAll:[],//添加全部的紧急程度select
				workTypeSelect:[],//任务类型select
				workTypeSelectAll:[],//添加全部的任务类型select
				handelUserId: '', // 处理人id
				handelUserArr: [], // 处理人select
				orderallTableDate: [],//表格内容
				dialogAllot: false, //分配form弹出框
				loading: true,//加载器
				totalRask: null,// 分页总条数
				pageSizeRask: 10, //当前分页一页多少条数
				currentPageRask: 1, //当前页数
				workerOrderId: '' //工单id
      }
		},
		created () {
			//取字典下拉信息
			let dictionaryValue = JSON.parse(sessionStorage.getItem('dictionaryValue'));
			dictionaryValue.map((item, index) =>{
				//紧急程度select
				if(item.typeValue == 'emergency_degree'){
					this.emergencyDegreeSelectAll = item.paramParamList;//为了添加全部的字段,复制数组,添加全部的数据
					this.emergencyDegreeSelect = this.emergencyDegreeSelectAll
					this.emergencyDegreeSelect.unshift({paramName: "全部",paramValue: ""})
				}
			})
			let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page:this.currentPageRask, //每页显示个数 (默认为10)
					size:this.pageSizeRask,    //当前页数(默认为1)
					type:'4'             // 类别（1:我创建，2:待处理，0:全部 4:处理中）
				}
			this.workOrderList(params)     //调用查询
			// //任务类型下拉列表（调用任务类型查询接口）
			let params1={
				query: '',
				status: 0,
				page: 1,
				size: 9999
			}
			this.taskTypes(params1);
			let paramsE = {
				equipmentIds: this.equipmentIds
			}
			this.businessPersonnelList(paramsE)

		},
    methods:{
			//查询按钮
			onSubmit(){      
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:'4'             // 类别（1:我创建，2:待处理，0:全部 4:处理中）
				}
				this.workOrderList(params)
			},
			//分配处理人确定按钮
			trueBtn() {
				this.dialogAllot = false
				let paramsS = {
					workOrderId: this.workerOrderId,
					handelUserId: this.handelUserId,
					status: 1
				}
				this.workOrderStatus(paramsS)
			},
			//分配
    	handleAllot(index, row) {
				//分配form弹出框
				this.dialogAllot = true 
				this.equipmentIds = row.equipmentIds // 设备id
				this.workerOrderId = row.workerOrderId // 工单id
				// this.userId = row.handelUserId // 处理人id
      },
      handleLook(index, row) {//查看
				this.$router.push({
					path: '/home/orderdetails',
					query: {
						id: row.workerOrderId,
						houseId: row.houseId,
						workOrderState: row.workOrderState
					}
				})
				// console.log(workTypeId);
      },
      handleClose(index, row) {//关闭
        //console.log(index, row);
			},
			//查询接口
			workOrderList(params){                     
				getWorkOrderList(params).then(res => {   
					let code = res.data.code;
					//console.log(res.data.data)
					if(code == 0){
						let data = res.data.data;
						this.totalRask = data.pageInfo.total
						this.orderallTableDate = data.list
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			//任务类型查询查询接口（获取任务类型下拉列表）
			taskTypes(params){    
				getTaskTypes(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.workTypeSelectAll = data.list;
						this.workTypeSelect = this.workTypeSelectAll //为了添加全部的字段,复制数组,添加全部的数据
						this.workTypeSelect.unshift({desc: "",id: '',name: "全部",status: 0,statusName: "启用"})

					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			//可用业务人员查询接口（获取工单处理人下拉列表）
			businessPersonnelList(params){    
				getBusinessPersonnelList(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.handelUserArr = data;
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			//工单状态修改接口（）
			workOrderStatus(params){    
				workOrderStatus(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let params = {
							workTypeId: this.formOrderSearch.workTypeId,
							emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
							createUserName: this.formOrderSearch.createUserName,
							handelUserName: this.formOrderSearch.handelUserName,
							customerName: this.formOrderSearch.customerName,
							WorkOrderState: this.formOrderSearch.WorkOrderState,
							createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
							createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
							completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
							completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
							page: this.currentPageRask, //每页显示个数 (默认为10)
							size: this.pageSizeRask,    //当前页数(默认为1)
							type:'4'                   // 类别（1:我创建，2:待处理，0:全部 ,4:处理中）
						}
						this.workOrderList(params)
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChange (val) {
				this.pageSizeRask = val
				this.currentPageRask = 1
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:'4'                   // 类别（1:我创建，2:待处理，0:全部 ,4:处理中）
				}
				this.workOrderList(params)
			},
			handleCurrentChange (val) {
				this.currentPageRask = val
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type:'4'                   // 类别（1:我创建，2:待处理，0:全部 ,4:处理中）
				}
				this.workOrderList(params)
			},
			getDate (item) {
				var date =  new Date(item);
				var y = 1900+date.getYear();
				var m = "0"+(date.getMonth()+1);
				var d = "0"+date.getDate();
				return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length)
			},
		},
		computed: {
			orderallTable () {
				return this.orderallTableDate.map(v => {
					return {
						createDate: this.getDate(v.createDate),
						createUserId: v.createUserId,
						createUserName: v.createUserName,
						emergencyDegreeId: v.emergencyDegreeId,
						emergencyDegreeName: v.emergencyDegreeName,
						equipmentIds: v.equipmentIds,
						handleDate: this.getDate(v.handleDate),
						handleUserId: v.handleUserId,
						handleUserName: v.handleUserName,
						houseId: v.houseId,
						workOrderState: v.workOrderState,
						workOrderStateName: v.workOrderStateName,
						workTypeId: v.workTypeId,
						workTypeName: v.workTypeName,
						workerOrderId: v.workerOrderId
					}
				})
			}
		}
  };
</script>
<style scoped>
 .order_main{padding-top:10px;}
 .line_listeditbox{line-height:40px;width:100%;}
 .line_edittips{display:block;color:#FA637B;font-size:12px;margin-left:5px;}
 .clred{color:#FA637B;padding-right:2px;font-style:normal;}
</style>